<template>
	<div>
		<!-- :remote-method="remoteMethod" -->
		<el-select
		    size="mini"
		    v-model="supplier"
		    filterable
		    remote
		    reserve-keyword
		    :placeholder="holder"
			:remote-method="remote"
		    @keyup.enter.native="remoteMethod"
		    :loading="loading">
		    <el-option
		      v-for="item in options"
		      :key="item.id"
		      :label="item.customer"
		      :value="item.customer">
		    </el-option>
		  </el-select>
		  
	</div>
</template>

<script>
	export default {
		data(){
			return {
				 supplier:"",
				 loading:false,
				 options:[],
				 keywords:""
			}
		},
		props:{
			supp:{
				type:String,
				default:''
			},
			holder:{
				type:String,
				default:'请输入供应商名称回车查询'
			},
			isdisabled:{
				type:Boolean,
				default:false
			}
		},
		watch:{
			supplier(newVal){
				this.$emit('getCustomerName',this.supplier)
			},
			supp(newVal){
				this.supplier = newVal
			},
		},
		mounted() {
			this.supplier = this.supp
		},
		methods:{
			remote(keywords){
				this.keywords = keywords
			},
			remoteMethod() {
				// console.log(this.supplier)
				let keywords = this.keywords
				if (keywords !== '') {
					 this.loading = true;
				  this.$post('/customer/searchCustomer',{keywords},res=>{
					  let result = res.data.data
					   this.loading = false
					  if(result.length==1){
						  this.supplier = result[0].customer
					  }
					  this.options = res.data.data
				  })
				} else {
				  this.options = [];
				}
		  }
		}
	}
</script>

